<template>
  <div style="position:absolute;width: 100%;height: 100%;background-color:#000000;opacity: 0.3;z-index: 100"></div>
  <n-carousel :show-arrow="false" :show-dots="false"autoplay interval="3000">
    <img
        class="carousel-img"
        src="/login/cc1.png"
    >
    <img
        class="carousel-img"
        src="/login/cc2.png"
    >
    <img
        class="carousel-img"
        src="/login/cc3.png"
    >
    <img
        class="carousel-img"
        src="/login/cc4.png"
    >
  </n-carousel>
    <div class="sillyguy">
      <div style="font-size: 68px;color: white">CAMPUS-HELPER</div>
      <div style="font-size: 38px;color: white;margin-bottom: 23px">Make your life easier</div>
      <button class="bu-log" @click="dialogVisibleLogin=true">登录/注册</button>
    </div>
<!--首页信息-->
  <n-modal
      :on-mask-click="handleClose"
      v-model:show="dialogVisibleLogin"
      style="width:1500px; padding:40px;">
    <n-card>
      <n-flex :wrap="false" align="center">
        <n-image src="/login/崩崩.webp" width="1000px"></n-image>
        <n-tabs
            class="card-tabs"
            default-value="signin"
            size="large"
            animated
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
            style="height: 300px;"
            @before-leave="handleBeforeLeave"
        >
          <n-tab-pane name="signin" tab="登录">
            <n-form label-placement="left" label-width="auto">
              <n-form-item-row label="用户名">
                <n-input placeholder="请输入用户名" v-model:value="saveUserForm.username" />
              </n-form-item-row>
              <n-form-item-row label="密码">
                <n-input placeholder="请输入密码" v-model:value="saveUserForm.password" @keydown.enter="saveUserLogin" />
              </n-form-item-row>
            </n-form>
            <n-button type="primary" block secondary strong @click="saveUserLogin">
              登录
            </n-button>
          </n-tab-pane>
          <n-tab-pane name="signup" tab="注册">
            <n-form :rules="rules" :model="saveUserForm" label-placement="left" label-width="auto">
              <n-form-item-row path="username" label="用户名">
                <n-input placeholder="请输入用户名"  v-model:value="saveUserForm.username" />
              </n-form-item-row>
              <n-form-item-row path="password" label="密码">
                <n-input placeholder="请输入密码"  v-model:value="saveUserForm.password" />
              </n-form-item-row>
              <n-form-item-row path="rePassword" label="重复密码">
                <n-input placeholder="请再次输入密码" v-model:value="saveUserForm.rePassword"/>
              </n-form-item-row>
            </n-form>
            <n-button type="primary" block secondary strong @click="saveUserReg">
              注册
            </n-button>
          </n-tab-pane>
        </n-tabs>
      </n-flex>
    </n-card>
  </n-modal>
</template>

<script setup>

import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import router from "@/router";
import {useMessage} from "naive-ui";

//顶部消息变量
const message = useMessage();

//切换标签页清空数据
const handleBeforeLeave = () => {
  saveUserForm.value = {};
  return true;
}

//控制弹窗
const dialogVisibleReg = ref(false);
const dialogVisibleLogin = ref(false);
//创建对象保存用户数据
const saveUserForm = ref({
  nickname:'',
  username:'',
  password:'',
  rePassword:'',
  phone:'',
  position:''
})

//判断已经输入的前一部分密码是否相同
function validatePasswordStartWith(rule, value) {
  return !!saveUserForm.value.password && saveUserForm.value.password.startsWith(value) && saveUserForm.value.password.length >= value.length;
}
//判断两个密码是否完全相同
function validatePasswordSame(rule, value) {
  return value === saveUserForm.value.password;
}

//输入验证的规则和触发方式
const rules = {
  username: [
    {
      required: true,
      validator(rule, value) {
        if (!value) {
          return new Error("用户名不能为空");
        }else {
          return true;
        }
      },
      trigger: ["input", "blur"]
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["input", "blur"]
    }
  ],
  rePassword: [
    {
      required: true,
      message: "请再次输入密码",
      trigger: ["input", "blur"]
    },
    {
      validator: validatePasswordStartWith,
      message: "两次密码输入不一致",
      trigger: "input"
    },
    {
      validator: validatePasswordSame,
      message: "两次密码输入不一致",
      trigger: ["blur", "password-input"]
    }
  ]
};


//定义方法关闭弹窗
const handleClose = ()=>{
  if (confirm('是否关闭本窗口?')){
    //用户确认关闭后,将弹窗关闭且将表单数据清空
    dialogVisibleLogin.value=false;
    saveUserForm.value = {};
  }
}

//定义方法保存注册/登录信息
const saveUserReg = ()=>{
  let data = qs.stringify(saveUserForm.value);//qs未安装
  console.log(data);
  axios.post(BASE_URL+'/v1/user/reg',data).then((response)=>{
    if(response.data.code==2000){
      message.success('注册成功!');
      dialogVisibleReg.value = false;//关闭弹窗
      saveUserForm.value = {};//清空表单输入数据,防止新增成功后还是上一个用户的数据
      location.reload();
    }else{
      message.error(response.data.msg);
    }
  })
}

//定义方法保存注册/登录信息
const saveUserLogin = ()=>{
  let data = qs.stringify(saveUserForm.value);//qs未安装
  console.log(data);
  axios.post(BASE_URL+'/v1/user/login',data).then((response)=>{
    if(response.data.code==2000){
      message.success('登录成功!');
      dialogVisibleLogin.value = false;//关闭弹窗
      setUser(response.data.data);
      router.push('/');
    }else{
      message.error(response.data.msg);
    }
  })
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #fff;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.card-tabs  {
  padding-left: 4px;
}

.carousel-img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.sillyguy{
  position: absolute;
  z-index: 200;
  top: 250px;
  left: 280px;
  font-family: '微软雅黑';
}

.bu-log {
  height: 80px;
  width: 200px;
  border-radius: 35px;
  font-size: 25px;
  color: white;
  border: 3px solid white;
  background-color: transparent;
  opacity: 0.7
}
.bu-log:hover {
  background-color: white;
  color: black;
  border: 4px solid lightgray;
}
</style>